<template>
  <div class="page-home row-content am-cf">
    <!-- 商城统计 -->
    <div class="row">
      <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-margin-bottom">
        <div class="widget am-cf">
          <div class="widget-head">
            <div class="widget-title">运营统计</div>
          </div>
          <div class="widget-body am-cf">
            <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
              <div class="widget-card card__blue am-cf">
                <div class="card-header">商品总量</div>
                <div class="card-body">
                  <div class="card-value">{{ one.goodsNum }}</div>
                  <div class="card-description">当前商品总数量</div>
                  <span class="card-icon iconfont icon-shangpin1"></span>
                </div>
              </div>
            </div>
            <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
              <div class="widget-card card__red am-cf">
                <div class="card-header">导码数量</div>
                <div class="card-body">
                  <div class="card-value">{{ one.codeNum }}</div>
                  <div class="card-description">当前导码总数量</div>
                  <span class="card-icon iconfont icon-ic_salesadvice"></span>
                </div>
              </div>
            </div>
            <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
              <div class="widget-card card__violet am-cf">
                <div class="card-header">核销数量</div>
                <div class="card-body">
                  <div class="card-value">{{ one.writeOffNum }}</div>
                  <div class="card-description">当前核销总数量</div>
                  <span class="card-icon iconfont icon-hua"></span>
                </div>
              </div>
            </div>
            <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
              <div class="widget-card card__violet am-cf">
                <div class="card-header">可用余额</div>
                <div class="card-body">
                  <div class="card-value">{{ one.balance }}</div>
                  <div class="card-description">当前可用余额</div>
                  <span class="card-icon iconfont icon-yonghu"></span>
                </div>
              </div>
            </div>
            <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
              <div class="widget-card card__primary am-cf">
                <div class="card-header">冻结金额</div>
                <div class="card-body">
                  <div class="card-value">{{ one.frozenMoney }}</div>
                  <div class="card-description">当前冻结金额</div>
                  <span class="card-icon iconfont icon-yonghu"></span>
                </div>
              </div>
            </div>
            <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
              <div class="widget-card card__blue am-cf">
                <div class="card-header">核销总额</div>
                <div class="card-body">
                  <div class="card-value">{{ one.writeOffMoney }}</div>
                  <div class="card-description">当前核销总额</div>
                  <span class="card-icon iconfont icon-hua"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 实时概况 -->
    <div class="row">
      <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-margin-bottom">
        <div class="widget am-cf">
          <div class="widget-head">
            <div class="widget-title">昨日概况</div>
          </div>
          <div class="widget-body am-cf">
            <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
              <div class="widget-outline dis-flex flex-y-center">
                <div class="outline-left">
                  <img src="../../static/image/05.png" alt="" />
                </div>
                <div
                  class="outline-right dis-flex flex-dir-column flex-x-between"
                >
                  <div style="color: rgb(102, 102, 102); font-size: 13px">
                    商品数量
                  </div>
                  <div style="color: rgb(51, 51, 51); font-size: 24px">
                    {{ two.goodsNum }}
                  </div>
                </div>
              </div>
            </div>
            <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
              <div class="widget-outline dis-flex flex-y-center">
                <div class="outline-left">
                  <img src="../../static/image/04.png" alt="" />
                </div>
                <div
                  class="outline-right dis-flex flex-dir-column flex-x-between"
                >
                  <div style="color: rgb(102, 102, 102); font-size: 13px">
                    导码数量
                  </div>
                  <div style="color: rgb(51, 51, 51); font-size: 24px">
                    {{ two.codeNum }}
                  </div>
                </div>
              </div>
            </div>
            <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
              <div class="widget-outline dis-flex flex-y-center">
                <div class="outline-left">
                  <img src="../../static/image/01.png" alt="" />
                </div>
                <div
                  class="outline-right dis-flex flex-dir-column flex-x-between"
                >
                  <div style="color: rgb(102, 102, 102); font-size: 13px">
                    核销数量
                  </div>
                  <div style="color: rgb(51, 51, 51); font-size: 24px">
                    {{ two.writeOffNum }}
                  </div>
                </div>
              </div>
            </div>
            <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
              <div class="widget-outline dis-flex flex-y-center">
                <div class="outline-left">
                  <img
                    src=""
                    alt=""
                  />
                </div>
                <div
                  class="outline-right dis-flex flex-dir-column flex-x-between"
                >
                  <div style="color: rgb(102, 102, 102); font-size: 13px">
                    核销额(元)
                  </div>
                  <div style="color: rgb(51, 51, 51); font-size: 24px">
                    {{ two.writeOffMoney }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 近七日交易走势 -->
    <div class="row">
      <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-margin-bottom">
        <div class="widget am-cf">
          <div class="widget-head">
            <div class="widget-title">近七日交易走势</div>
          </div>
          <div class="widget-body am-cf">
            <div id="echarts-trade" class="widget-echarts">图表狼的做</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import echarts from "echarts";
import "@/static/style/home.scss";
// import { getInfo } from "@/api/app";
import countTo from "vue-count-to";

export default {
  name: "home",
  components: {
    countTo,
  },
  data() {
    return {
      one: {
        balance: "1211950.40",
        codeNum: 47,
        frozenMoney: "1200.00",
        goodsNum: 6,
        writeOffMoney: 2426300.8,
        writeOffNum: 11,
      },
      two: {
        codeNum: 0,
        goodsNum: 0,
        writeOffMoney: "0.00",
        writeOffNum: 0,
      },
      three: [
        { date: "2020-12-04", writeOffMoney: 0, writeOffNum: 0 },
        { date: "2020-12-05", writeOffMoney: 0, writeOffNum: 0 },
        { date: "2020-12-06", writeOffMoney: 0, writeOffNum: 0 },
        { date: "2020-12-07", writeOffMoney: 0, writeOffNum: 0 },
        { date: "2020-12-08", writeOffMoney: 0, writeOffNum: 0 },
        { date: "2020-12-09", writeOffMoney: 0, writeOffNum: 0 },
        { date: "2020-12-09", writeOffMoney: 0, writeOffNum: 0 }
      ],
    };
  },
  created() {
    // this.getInfo();
    // 请求数据
  },
  mounted() {},
  methods: {
    // getInfo() {
    // //   getInfo().then((res) => {
    // //     this.one = res.data.operate;
    // //     this.two = res.data.yesterday;
    // //     this.three = res.data.tradingTrends;
    //     let arr = [];
    //     let arr1 = [];
    //     let arr2 = [];
    //     this.three.forEach((element) => {
    //       arr.push(element.date);
    //       arr1.push(element.writeOffMoney);
    //       arr2.push(element.writeOffNum);
    //     });
    //     this.line(arr,arr1,arr2)
    //   // });
    // },
    // line(time, money, num) {
    //   var dom = document.getElementById("echarts-trade");
    //   echarts.init(dom, "walden").setOption(
    //     {
    //       tooltip: {
    //         trigger: "axis",
    //       },
    //       legend: {
    //         data: ["导码数", "核销数"],
    //       },
    //       toolbox: {
    //         show: true,
    //         showTitle: false,
    //         feature: {
    //           mark: { show: true },
    //           magicType: { show: true, type: ["line", "bar"] },
    //         },
    //       },
    //       calculable: true,
    //       xAxis: {
    //         type: "category",
    //         boundaryGap: false,
    //         data: time,
    //       },
    //       yAxis: {
    //         type: "value",
    //       },
    //       series: [
    //         {
    //           name: "核销总额",
    //           type: "line",
    //           data: money,
    //         },
    //         {
    //           name: "核销数量",
    //           type: "line",
    //           data: num,
    //         },
    //       ],
    //     },
    //     true
    //   );
    // },
  },
};
</script>